<!DOCTYPE html>
<html style="margin-top: -10px;" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>VIP</title>
    <link rel="stylesheet" type="text/css" href="../css/wxpay/style1.css"/>
    <link href="../css/wxpay /style2.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="icon" href="../imgs/favicon.ico">
    <link rel="stylesheet" type="text/css" href="../css/wxpay/all.css"/>
    <link rel="stylesheet" type="text/css" href="../css/wxpay/pages-paysuccess.css"/>
    <link rel="stylesheet" type="text/css" href="../css/wxpay/pages-weixinpay.css"/>
    <link rel="stylesheet" href="../css/wxpay/font-awesome.min.css" type="text/css"/>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/axios-0.18.0.js"></script>
    <style>
        #app {
            width: 100%;
            border: 1px solid;

        / / 重点是以下规则 position: absolute;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            margin: auto;

        }

        #app1 {
            width: 61.8%;

        / / 重点是以下规则 position: relative;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            margin: auto;
        }

        body {
            background: url(../imgs/333.png) no-repeat fixed;
            background-size: cover;
        }
    </style>
</head>
<body style="width: 99.92%;">
<div class="auto-box" id="app" style="border-top: none;border-bottom: none;">
    <div style="object-fit: fill;margin-top: 10px">
        <img src="../imgs/vip-vip.jpg" style="height:400px;width:100%"/>
    </div>
    <div class="main-box">
        <div class="index-tit">
            <div>
                <template >
                    <el-tabs  v-model="activeName" @tab-click="handleClick" stretch>
                        <el-tab-pane  label="尊贵VIP" name="first"  aria-hidden="true">
                            <span slot="label">
                              <span style="margin-left: 48%;" class="span-box">
                                <span style="font-size: 30px">尊贵VIP</span>
                                <el-tooltip
                                        class="item"
                                        effect="dark"
                                        content="2"
                                        placement="bottom-start">
                                  <span class="btn-bell-badge">
                                    <span style="font-size: 20px" class="num fa fa-cc-visa fa-1x"></span>
                                  </span>
                                </el-tooltip>
                              </span>
                            </span>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </div>
        </div>
        <ul class="index-tserver" id="app2" style="
            width: 56%;
    margin-left: 22%;">
            <li class="tserver-list1">
                连续包月
                <p class="animated zoomin" @click="createOrder(13)">
                    <a href="javascript:void(0)"
                       style="font-size: 19px;text-align: center;margin-top: 10px;text-decoration: none">&nbsp;&nbsp;连续包月<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#165;13</a>
                </p>
            </li>
            <li class="tserver-list2" >
                一个月
                <p class="animated zoomin" @click="createOrder(16)">
                    <a href="javascript:void(0)"
                       style="font-size: 19px;text-decoration: none">&nbsp;&nbsp;&nbsp;&nbsp;一个月<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#165;16</a>
                </p>
            </li>
            <li class="tserver-list2" >
                三个月
                <p class="animated zoomin" @click="createOrder(35)">
                    <a href="javascript:void(0)"
                       style="font-size: 19px;text-decoration: none">&nbsp;&nbsp;&nbsp;&nbsp;三个月<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#165;16</a>
                </p>
            </li>
        </ul>
    </div>
    <br/><br/>
    <!-- Form -->
    <div>
        <el-dialog title="" :visible.sync="dialogFormVisible" width="40%" @closed="hand">
            <div class="cart py-container">
                <!--主内容-->
                <div class="paysuccess">
                    <div class="success">
                        <h3><img src="../imgs/right.png" width="48" height="48">　恭喜您，支付成功啦！</h3>
                        <div class="paydetail">
                            <p>支付方式：微信支付</p>
                            <p>支付金额：￥<em>{{payMoney}}</em>元</p>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <div>
        <div class="cart py-container" style=" ;margin-left: 0%;margin-top: 0px">
            <!--主内容-->
            <div class="checkout py-container  pay" :style="stylekey">
                <div class="checkout-tit" style="margin-left: 830px;padding-bottom: 30px;">
                    <span class="fr"><em class="sui-lead" style="font-size: 30px">应付金额：</em><em
                            class="orange money" style="font-size: 30px">{{payMoney}} 元</em></span>
                    <div class="clearfix"></div>
                </div>
                <div class="checkout-steps" style="margin-left: 830px;">
                    <div class="fl code" style="display: inline-block">
                        <div id="qrcode"></div>
                        <div class="saosao">
                            <p style="font-size: 20px;margin-left: -100%;">使用微信扫一扫</p>
                            <p style="font-size: 20px;margin-left: -100%;">扫描二维码支付</p>
                        </div>
                    </div>
                    <div class="clearfix" style="margin-bottom: 0px"></div>
                </div>
            </div>
        </div>
    </div>
    <!--vip会员特权图标列表布局-->
</div>
</body>
<script src="../js/qrcode/qrcode.min.js"></script>
<script src="../js/qrcode/stomp.min.js"></script>
<script type="text/javascript" th:inline="javascript">
    let vpp = new Vue({
        el: "#app",
        data: {
            activeName: 'first',
            payMoney: 13,
            dialogFormVisible: false,
            codeUrl: "",
            stylekey: "display: none",
            orderInfoPO: {
                orderName: "vip套餐",
                payMoney: 13,
            }
        },
        methods: {
            handleClick(tab, event) {

            },
            goBack() {
                alert("back")
            },
            createOrder(e) {
                this.payMoney = e;
                this.orderInfoPO.payMoney = e;
                axios.post("/wxpay/nativePay" ,this.orderInfoPO, {headers: {'token': window.parent.token}})
                    .then(res => {
                    console.log(res.data.message);
                    if (res.data.flag) {
                        this.codeUrl = res.data.message;
                        qrcode.makeCode(this.codeUrl);
                        this.stylekey = "display: block"
                    }
                })
            },
            hand() {
                this.stylekey = "display: none"
            }
        }
    });
    //显示二维码
    let qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 200,
        height: 200
    });

    let client = Stomp.client('ws://112.124.5.232:15674/ws');
    let on_connect = function (x) {
        id = client.subscribe("/exchange/ordernotify", function (d) {
            let orderId = "110110";//订单号
            if (d.body == orderId) {
                vpp.dialogFormVisible = true
            }
        });
    };
    let on_error = function () {
        console.log('error');
    };
    client.connect('web', 'web', on_connect, on_error, '/');
</script>
</html>
